// 带三角形的面板
@mixin caret-panel($name, $borderColor: #dcdfe6, $backgroundColor: #fff) {
    @include popper-panel;

    .foxui-#{$name}-caret {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
        filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));

        &::after {
            content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 6px;
        }
    }

    &[placement^='bottom'],
    &[placement^='top'] {
        &[placement$='-start'] {
            .foxui-#{$name}-caret {
                left: 24px;
            }
        }

        &[placement$='-center'] {
            .foxui-#{$name}-caret {
                left: calc(50% - 6px);
            }
        }

        &[placement$='-end'] {
            .foxui-#{$name}-caret {
                left: calc(100% - 30px);
            }
        }
    }

    &[placement^='bottom'] {
        .foxui-#{$name}-caret {
            top: -6px;
            border-bottom-color: $borderColor;
            border-top-width: 0;

            &::after {
                top: 1px;
                margin-left: -6px;
                border-bottom-color: $backgroundColor;
                border-top-width: 0;
            }
        }
    }

    &[placement^='top'] {
        .foxui-#{$name}-caret {
            bottom: -6px;
            border-top-color: $borderColor;
            border-bottom-width: 0;

            &::after {
                bottom: 1px;
                margin-left: -6px;
                border-top-color: $backgroundColor;
                border-bottom-width: 0;
            }
        }
    }

    &[placement^='left'],
    &[placement^='right'] {
        &[placement$='-start'] {
            .foxui-#{$name}-caret {
                top: 18px;
            }
        }

        &[placement$='-center'] {
            .foxui-#{$name}-caret {
                top: calc(50% - 6px);
            }
        }

        &[placement$='-end'] {
            .foxui-#{$name}-caret {
                top: calc(100% - 30px);
            }
        }
    }

    &[placement^='left'] {
        .foxui-#{$name}-caret {
            right: -6px;
            border-left-color: $borderColor;
            border-right-width: 0;

            &::after {
                right: 1px;
                margin-top: -6px;
                border-left-color: $backgroundColor;
                border-right-width: 0;
            }
        }
    }

    &[placement^='right'] {
        .foxui-#{$name}-caret {
            left: -6px;
            border-right-color: $borderColor;
            border-left-width: 0;

            &::after {
                left: 1px;
                margin-top: -6px;
                border-right-color: $backgroundColor;
                border-left-width: 0;
            }
        }
    }
}
